<template>
    <div class="baseMap">
        <div class="baseMapContainter">
            <img class="changeImage" :src="map[mapIndex].name" alt="底图切换" title="底图切换" @click="changeBaseMap">
            <div :class="['baseMap_img',mapFlag?'animation_show':'animation_hiden']"> 
                <div class="baseMap_panl" v-for="(item,index) in map" :key="index">
                    <img :id="item.id" :src="item.name" @click="changeMap(item.id)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {baseMapConfig} from '../map/mapconfig'
import {switchBaseMap} from '../map/mapHandle'
export default {
    name:'baseMap',
    data(){
        return {
            map:baseMapConfig,
            mapFlag:false,
            mapIndex:0,//默认第一张底图
        }
    },
    methods:{
        //左边图片控制右侧合资显示隐藏
        changeBaseMap(){
            this.mapFlag = ! this.mapFlag;
        },
        //切换底图
        changeMap(id){
            this.changeBaseMap();
            this.mapIndex = id;
            switchBaseMap(id);
        }
    }
}
</script>

<style scoped>
.baseMap{
    position: fixed;
    bottom: 5%;
    right: 3%;
}
.changeImage{
    width: 86px;
    height: 52px;
}
.baseMapContainter{
    width: 86px;
    height: 52px;
    cursor: pointer;
    border: 2px solid rgba(55, 133, 223,0);
    
    position: relative;
}
.baseMapContainter:hover{
    cursor: pointer;
    border: 2px solid rgba(102, 102, 102, 0.90);
}
.baseMap_img{
    height: 52px;
    background: linear-gradient(#03f0ff, #03f0ff) left top,
    linear-gradient(#03f0ff, #03f0ff) left top,
    linear-gradient(#03f0ff, #03f0ff) right top,
    linear-gradient(#03f0ff, #03f0ff) right top,
    linear-gradient(#03f0ff, #03f0ff) left bottom,
    linear-gradient(#03f0ff, #03f0ff) left bottom,
    linear-gradient(#03f0ff, #03f0ff) right bottom,
    linear-gradient(#03f0ff, #03f0ff) right bottom;
    background-repeat: no-repeat;
    background-size: 2px 20px, 20px 2px;
    padding: 22px;
    position: absolute;
    top: -45%;
    right: 120%;
    overflow: hidden;
    display: flex;
}
.baseMap_panl{
    position: relative;
    height: 92px;
    margin-right: 20px;
    border: 2px solid rgba(252, 255, 255,0);
    /* display: flex; */
    /* flex-direction: row;
    justify-content: flex-start; */
}
.baseMap_panl:last-child{
    margin-right: 0px;
}
.baseMap_panl img{
    width: 86px;
    height: 52px;
   
}
.baseMap_panl img:hover{
    cursor: pointer;
    border: 2px solid rgba(102, 102, 102, 0.90);
}

.animation_show{
    opacity: 1;
    transition: 0.5s all ease-in;
    animation: anm_show 1s;
}
.animation_hiden{
    opacity: 0;
    transition: 0.5s all ease-in;
    animation: anm_hiden 1s;
}
@keyframes anm_show{
    0%{
        width: 0;
    }
    100%{
        width: 310px;
    }
}
@keyframes anm_hiden{
    0%{
        width: 310px;
    }
    100%{
        width: 0;
    }
}
</style>